<div class="intro-container mb-5">
  <div class="intro-inner-container mx-auto">
    <div class="h-100 intro w-100"></div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div
      class="align-items-center d-flex flex-column justify-content-center w-100"
    >
      <gf-logo size="large" />
      <p class="lead m-0">Wealth Management Software</p>
    </div>
  </div>

  @if (hasPermissionToCreateUser) {
    <div class="button-container row">
      <div class="align-items-center col d-flex justify-content-center">
        <div class="py-5 text-center">
          @if (hasPermissionForAuthToken) {
            <button
              class="d-inline-block"
              color="primary"
              mat-flat-button
              (click)="openShowAccessTokenDialog()"
            >
              <ng-container i18n>Create Account</ng-container>
            </button>
          }
          @if (hasPermissionForAuthToken && hasPermissionForAuthGoogle) {
            <div class="my-3 text-muted" i18n>or</div>
          }
          @if (hasPermissionForAuthGoogle) {
            <a
              class="px-4 rounded-pill w-100"
              href="../api/v1/auth/google"
              mat-stroked-button
              ><img
                class="mr-2"
                src="../assets/icons/google.svg"
                style="height: 1rem"
              /><span i18n>Continue with Google</span></a
            >
          }
        </div>
      </div>
    </div>
  }
</div>
